<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
		<link href="resources/css/mui.min.css" rel="stylesheet" />
		<link href="resources/css/common1.css" rel="stylesheet" />
		<link href="resources/css/swiper.css" rel="stylesheet" />
		<script src="resources/js/swiper.js"></script>
		<script src="resources/js/jquery-1.10.1.min.js"></script>
		<script src="resources/js/common.js"></script>
		<script src="resources/js/mui.min.js"></script>
		<script src="resources/js/vue.min.js"></script>
		
		<title>现金雷达 - 贷款</title>
		<style>
		    .headerScherBox{width: 100%; position: fixed; top: 0px; z-index: 999; height: auto;padding: 0px 10px; padding-top: 15px; background-color: #2487ff;}
		    .headerScher{ height:30px; border-radius: 15px; line-height: 30px; background-color: #fff; position: relative; width:100%; }
			.headerScher input{width: 95%;border-radius: 15px; font-size: 12px; background-color: #fff; height: 100%; line-height: 100%; border: 0px; padding-left: 32px;}
			.headerScher img{position: absolute; width: 18px; left: 10px; top:6px;}
			.listLogo{background-color: #fff; padding-top: 10px;}
			.listLogo img{width: 60%;}
			.listLogo .mui-row{ text-align: center; border-bottom: 1px solid #eee;}
			.marqueeBox{width: 100%; padding: 0px 10px; height: 40px; line-height: 40px;}
			.marqueeLogo{float: left; padding-left: 22px; position: relative; width: 60px; height: 40px; background-color: #fff;}
			.marqueeLogo img{ width: 18px; left: 0px; top:10px;  position: absolute; margin-right: 5px;}
			.marqueeTit{ width:calc(100% - 60px); float: left; height: 24px; margin-top: 8px; overflow: hidden;}
			.marqueeTit marquee{width: 100%; line-height: 30px;}
			.marqueeTit marquee p{margin: 0; width: 100%; padding: 0; height: 25px;overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
			.newTit2 span{font-size: 12px; border:1px solid #EEEEEE; color: #6c747d; padding: 2px 3px; margin-right: 15px;}
			.moreTit{margin-right: 15px; font-size: 12px; margin-top: 1px;}
			.newTit{margin-right: 15px; font-size: 12px; margin-top: 1px;}
			.newDeail{text-align: center; padding: 8px 0px;}
			.newDeail p{ margin-bottom: 0px; height: 20px;}
			.newImg{border-radius: 3px;}
			.mui-content>.mui-table-view:first-child{margin-top: 10px;}
			
			.headerSelectBox{padding: 5px 0px;}
			.triangle-down {width: 0;   height: 0; margin-left: 3px; margin-top: -5px;;   display: inline-block;   border-left: 4px solid transparent;   border-right: 4px solid transparent;   border-top: 4px solid #FFFFFF;}
			.headerSelect{color: #FFFFFF;text-align: center;}
			
			.headerSelectBox .active{color: #333;}
			.headerSelectBox .active .triangle-down {width: 0;   height: 0; margin-left: 3px; margin-top: -5px;;   display: inline-block;   border-left: 4px solid transparent;   border-right: 4px solid transparent;   border-top: 4px solid #333;}
			
			.maskBox{width: 100%;height: 100%; display:none; background-color:black;filter:alpha(opacity=70);-moz-opacity:0.7;opacity:0.7;z-index: 3;position: fixed;top: 75px;left: 0;}
			.maskCon{width:100%;height:100%; display:none; z-index: 9;position: fixed;left: 0;right: 0;top: 75px;bottom: 0;}
			.maskText{width:100%; height: auto; display:none; background: #ffffff; padding: 10px 0px;} 
			.maskText ul li{width: 28%; height:25px; line-height:25px; background-color:#f7f7f7; border-radius:3px; margin:8px 0px; color:#333; margin-left: 4%; float: left; text-align: center;}       
			.maskText .active{ background: #3084df; color:#ffffff;}
			.maskText ul{display: none;}
			.addTypeList{width: 100%;  display:none;   text-indent: 5px;border-bottom:1px solid #efefef; background-color: #ffffff; height: auto; line-height: 40px;}
			.notHas{width:100%; display:none; padding-top: 80px; padding-bottom:100px; height:500px; text-align: center; background-color: #ffffff;}
			.addTypeList .addTypeListSpan{ border:1px solid #3084df;  display:none;  padding-left: 2px; color:#3084df; font-size: 1.2rem; margin-right: 5px;}
			.addTypeList span .mui-icon{display: inline; font-size: 16px;}
			.topDiv{height: 75px;}
			
			
			.logoTit{text-align: center;}
			.logoTitImg{ width: 50px; height: 50px;}
			.mui-table-view-cell:after{background-color:#fff;}
			
			
			.people{ padding-left: 15px;}
			.newList { border-bottom:1px solid #efefef;}
			.newListRight{padding-top: 4px;}
			.fontS17{font-size:17px;}
			.fontS16{font-size:16px;}
			.fontS15{font-size:15px;}
			.logoTit p{ width: 100%;}
			.hr{width: 5px; left:5px; height: 70px; position: absolute; top:17px; border-left:1px solid #efefef;}
			.newListTit:after{background-color:#efefef;}
		</style>
	</head>
	<body>
	<div id="app">
	<!--弹出菜单遮罩-->
	<div class="maskBox"></div>
		<div class="maskCon">
			<div class="maskText ">
				<ul id="quotaBox">
					<li @click="search(1,'','')" class="active">金额不限</li>
					<li @click="search(1,'0','3000')">3000以下</li>
					<li @click="search(1,'3000','5000')">3000-5000</li>
					<li @click="search(1,'5000','10000')">5000-10000</li>
					<li @click="search(1,'10000','20000')">10000-20000</li>
					<li @click="search(1,'20000','')">20000以上</li>
				</ul>
				<ul id="typesBox">
					<li @click="search(2,'','')" class="active">所有类型</li>
					<li @click="search(2,'极速下款','0')">极速下款</li>
					<li @click="search(2,'审核快','0')">审核快</li>
					<li @click="search(2,'无手续费','0')">无手续费</li>
					<li @click="search(2,'利率低','0')">利率低</li>
					<li @click="search(2,'通过率高','0')">通过率高</li>
					<li @click="search(2,'白领专属','0')">白领专属</li>
				</ul>
				<ul id="dateBox">
					<li @click="search(3,'','')"  sortDate="" longDate="" class="active">不限</li>
					<li @click="search(3,'0','1')" sortDate="0" longDate="1">30天内</li>
					<li @click="search(3,'1','3')"  sortDate="1" longDate="3">1-3个月</li>
					<li @click="search(3,'3','6')"  sortDate="3" longDate="6">3-6个月</li>
					<li @click="search(3,'6','12')"  sortDate="6" longDate="12">6-12个月</li>
					<li @click="search(3,'12','')"  sortDate="12" longDate="">12个月以上</li>
				</ul>
				<div class="clear"></div>
			</div>
		</div>
		
		
		<div class="headerScherBox">
			<div class="headerScher"><input id="keyword" @keyup.13="show($event)"  type="text" placeholder="请输入"><img src="resources/images/indexSeach.png"></div>
			<div  class="mui-row headerSelectBox">
				<div class="mui-col-sm-4 mui-col-xs-4 headerSelect">
               		          额度<span class="triangle-down"></span>
		        </div>
		        <div class="mui-col-sm-4 mui-col-xs-4 headerSelect">
	                	贷款类型<span class="triangle-down"></span>
		        </div>
		        <div class="mui-col-sm-4 mui-col-xs-4 headerSelect">
	                	期限<span class="triangle-down"></span>
		        </div>
			</div>
			
		</div>
		<div class="topDiv"></div>
		<p class="addTypeList">筛选条件：
			<span class="addTypeListSpan addTypeList0"><span>综合排序</span><i class="mui-icon mui-icon-closeempty"></i></span>
			<span class="addTypeListSpan addTypeList1"><span>不限</span><i class="mui-icon mui-icon-closeempty"></i></span>
			<span class="addTypeListSpan addTypeList2"><span>不限</span><i class="mui-icon mui-icon-closeempty"></i></span>
		</p>
		
		<div class="mui-content"   v-for="(search,index) in searchList.content">
			<template v-if="!searchList">
				<p style="text-align: center; padding-top: 10px;">空空如也~</p>					
			</template>
			<ul class="mui-table-view">
					<a :href="'loanDetails.html?id='+search.id">
					<li class="newList mui-row" >
						<div class="logoTit mui-col-sm-3 mui-col-xs-3 mui-table-view-cell mui-media">
							<img class="logoTitImg"  :src="search.iconUrl">
							<p class="color3 fontS15">{{search.name}}</p>
						</div>
						<div class="mui-col-sm-9 mui-col-xs-9 mui-table-view-cell mui-media">
							<div class="mui-row">
								<div class="mui-col-sm-6 newListRight mui-col-xs-6 mui-table-view-cell mui-media">
									<p class="color2">月参考率</p>
									<p class="color2 fontS16">{{search.interestRate30}}%</p>
								</div>
								<div class="mui-col-sm-6  newListRight mui-col-xs-6 mui-table-view-cell mui-media">
									<p>最高额度</p>
									<p class="color3 fontS16">{{search.averageqQuota}}元</p>
								</div>
							</div>
							<p class="people">{{search.totalApplyCount}}人申请通过</p>
							<div class="hr"></div>
						</div>
					</li>
					</a> 
				<!-- <li class="mui-table-view-cell mui-media">
					<a :href="'loanDetails.html?id='+search.id">
						<img class="mui-media-object mui-pull-left newImg" :src="search.iconUrl">
						<div class="mui-media-body font-size14">
							{{search.name}}
							<span class="mui-pull-right newTit color4"><span class="color2">{{search.totalApplyCount}}</span>人申请通过</span>
							<p class='mui-ellipsis newTit2' ><span>10秒审核</span><span>快速下款</span><span>芝麻分贷</span>
								<template v-for="(tags,index) in search.tagsList"> 
									<template v-if="index < 3">
										<span>{{tags}}</span>
									</template>
								</template>
							</p>
						</div>
					</a>
				</li>
				<li  class="mui-row">
			        <div class="mui-col-sm-4 mui-col-xs-4 newDeail">
		                <p class="color3">最高额度</p>
		                <p class="color2">{{search.averageqQuota}}元</p>
			        </div>
			        <div class="mui-col-sm-4 mui-col-xs-4 newDeail">
		                <p class="color4">月参考利息</p>
		                <p class="color3">{{search.interestRate30}}%</p>
			        </div>
			        <div class="mui-col-sm-4 mui-col-xs-4 newDeail">
		                <p class="color4">放款时间</p>
		                <p class="color3">{{search.averageApplyTime}}小时</p>
			        </div>
				</li> -->
			</ul>
		</div>
		
		<!-- <div class="mui-row tabBarBox" >
			<li class=" fontS14" onclick="tabBar1()">
            	<img src="resources/images/tab-bar1.png"> <br> 首页
	        </li>
  	        <li class="active fontS14" onclick="tabBar2()">
                <img src="resources/images/tab-bar21.png"> <br>贷款
	        </li>
	        <li class="fontS14" onclick="tabBar3()">
	            <img src="resources/images/tab-bar3.png">  <br>社区
	        </li>
			<li class="fontS14" onclick="tabBar4()">
                <img src="resources/images/tab-bar4.png"> <br>我的
			</li>
		</div>
		<div class="tabBarBottom"></div> -->
	</div>	
	<script>
	function GetQueryString(name) {  
	    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");  
	    var r = window.location.search.substr(1).match(reg);  //获取url中"?"符后的字符串并正则匹配
	    var context = "";  
	    if(r != null){
	        context = r[2];
	    }
	    reg = null;  
	    r = null;  
	    return context == null || context == "" || context == "undefined" ? "" : context;  
	}

		var body= "";
	 	var model ="";
	 	var jdata="";	
		//获取浏览器参数modal String 可空 recommend:新手推荐hot:热门latest:最新 
	 	var listType = GetQueryString("id");  //区分新人专享、热门推荐、新品推荐
		//调接口必传 格式
		 var header={
	     	app_version:'1.1.1',
	     	app_model:'ios',
	     	token:'066995456465562'
	     }
	 	body={
 			 'loanType':'',
			'minQuota':'',
			'maxQuota':'',
			'minAverageApplyTime':'',
			'maxAverageApplyTime':'',
			'modal':'' 
	    }
	 	if(listType != ""){
	 		body.modal = listType
	 	}else{
	 		body.modal = "";
	 	}
	 	
		var vm = new Vue({
			el : '#app',
			data : {
				searchList:[],
			},
			created : function() {
				var keyword = decodeURI(GetQueryString("keyword"));
				encodeURIComponent()
				if(keyword != ""){
					$("#keyword").val(keyword);
					body={
 							'nameLike':keyword
 					    }
 						model={
 					    	body:body,
 					    	header:header,
 					    }
 					    jdata=JSON.stringify(model);
 						var that=this;
 						$.ajax({
 							url: 'loan/getLoans',
 							method: 'post',
 							data:{
 								'data':jdata
 							},
 							success: function(data){
 								var json=JSON.parse(data);
 								that.searchList = json.data; 
 							},
 							error: function(){
 							}
 						});
				}else{
					this.init();
				}
				
			},
			methods : {
				init : function(){
					model={
				    	body:body,
				    	header:header,
				    }
				    jdata=JSON.stringify(model);
					var that=this;
					$.ajax({
						url: 'loan/getLoans',
						method: 'post',
						data:{
							'data':jdata
						},
						success: function(data){
							var json=JSON.parse(data);
							that.searchList = json.data; 
						},
						error: function(){
							/* alert("数据加载异常!"); */
						}
					});
				},
				search : function(tab,min,max){
					var tab = tab;
					if(tab == '1'){
						body.minQuota = min;
						body.maxQuota = max;
					}
					if(tab == '2'){
						body.loanType = min;
					}
					if(tab == '3'){
						body.minAverageApplyTime = min;
						body.maxAverageApplyTime = max;
					}
					this.init();
				},
				show:function(ev){
                    if(ev.keyCode == 13){
                    	var val = $("#keyword").val();
         			    if(val != ""){
         			    		body={
         							'nameLike':val
         					    }
         						model={
         					    	body:body,
         					    	header:header,
         					    }
         					    jdata=JSON.stringify(model);
         						var that=this;
         						$.ajax({
         							url: 'loan/getLoans',
         							method: 'post',
         							data:{
         								'data':jdata
         							},
         							success: function(data){
         								var json=JSON.parse(data);
         								that.searchList = json.data; 
         							},
         							error: function(){
         							}
         						});
         					$("#keyword").blur()
         				 }else{
         					mui.toast('请输入您想要查询的内容');
         				 }
                    }
                },

			},
			filters : {
				
			}
		})
		
		var _index = "";
		$(".headerSelectBox div").click(function(){
			$(".maskText ul").hide();
			$(this).addClass("active").siblings().removeClass("active");
			 _index = $(this).index();
			$(".maskBox").show();
			$(".maskCon").show();
			$(".maskText").show();
			$(".maskText ul").eq(_index).show();
			$('body').css("overflow","hidden");
			
			
		})
		$(".maskText li").click(function(){
			_index = $(this).index();
			$(".maskBox").hide();
			$(".maskCon").hide();
			$(".maskText").hide();
			$('body').css("overflow","auto");
			$(".headerSelectBox div").removeClass("active");
			$(this).addClass("active").siblings().removeClass("active");
			showConditions(_index)
		})
		$(".maskCon").click(function(){
		  $(".maskBox").hide();
		  $(".maskCon").hide();
		  $(".maskText").hide();
		  $('body').css("overflow","auto");
		  $(".headerSelectBox div").removeClass("active");
      	 	})
       	 	
       	 	
        //显示筛选条件
		function showConditions(_index) {
			if($("#quotaBox .active").text() == "金额不限" && $("#typesBox .active").text() == "所有类型" && $("#dateBox .active").text() == "不限"){
				$(".addTypeList").hide();
			}else{
				$(".addTypeList").show();
			}	
				
			if($("#quotaBox .active").text() == "金额不限") {
				$(".addTypeList0").hide();
			} else {
				$(".addTypeList0").show();
				$(".addTypeList0").find("span").text($("#quotaBox .active").text() );
			}
			if($("#typesBox .active").text() == "所有类型") {
				$(".addTypeList1").hide();
			} else {
				$(".addTypeList1").show();
				$(".addTypeList1").find("span").text($("#typesBox .active").text() );
			} 
			if($("#dateBox .active").text() == "不限") {
				$(".addTypeList2").hide();
			} else {
				$(".addTypeList2").show();
				$(".addTypeList2").find("span").text($("#dateBox .active").text() );
			} 
		}
		//筛选条件显示
		$(".addTypeList0 i").click(function() {
			$(".addTypeList0").hide();
			$("#quotaBox li").eq(0).click();
		})
		$(".addTypeList1 i").click(function() {
			$(".addTypeList1").hide();
			$("#typesBox li").eq(0).click();
		})
		$(".addTypeList2 i").click(function() {
			$(".addTypeList2").hide();
			$("#dateBox li").eq(0).click();
		})	
		 
		</script>	
	</body>

</html>